<template>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <!-- <div :id="uuid" :style="style"></div> -->
    <div ref="echarts" :style="style"></div>
</template>

<script>
import * as echarts from 'echarts';

// 生成uuid值
const idGen = () => {
    return new Date().getTime()
}

export default {
    name: 'EchartsComponent',
    props: {
        width: {
            type: String,
            default:'600px'
        },
        height: {
            type: String,
            default: '400px'
        },
        option: {
            type: Object,
            default:()=>{}
        }
    },
    data() {
        return {
            uuid: null, // 生成不同的值，防止id值重复报错
            myChart: null, // 实例交给data管理
        }
    },
    created() {
        this.uuid = idGen;
        console.log('uuid-->', this.uuid);
    },
    computed: {
        style() {
            return {
                height: this.height,
                width:this.width,
            }
        }
    },
    mounted() {
        // 基于准备好的dom，初始化echarts实例
        // this.myChart = echarts.init(document.getElementById(this.uuid));
        this.myChart = echarts.init(this.$refs.echarts);

        
        // 使用刚指定的配置项和数据显示图表。
        this.myChart.setOption(this.option);
    },
    watch: {
        // 
        width() {
            if (this.myChart)
                this.myChart.resize({
                    animation: {
                        duration:600
                    }
                })
        },

        option() {
            if (this.myChart)
                this.myChart.setOption(this.option, {
                    notMerge: true,
                });
        }
    }
}
</script>

<style scoped></style>